<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ananlyze Result</title>
	<style type="text/css">
		.hidden {
			display: none;
		}
	</style>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script src="./src/jquery.jqplot.min.js"></script>
	<script src="./src/plugins/jqplot.barRenderer.min.js"></script>
	<script src="./src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
	<script src="./src/plugins/jqplot.pointLabels.min.js"></script>
	<link rel="stylesheet" type="text/css" href="./src/jquery.jqplot.min.css" />
	<link rel="stylesheet" type="text/css" href="./src/foundation.min.css" />
</head>
<body>
	<script type="text/javascript">
		function GetData(selector) {
			var data = eval($(selector).html())
			var series = []
			var sum = 0
			for (var i in data) {
				series.push(data[i]["Traffic"] / 1024)
			}
			return series
		}
	

		$(document).ready(function() {
			var data_3g = GetData('#data_3G')
			var data_wifi = GetData('#data_WIFI')
			Array.prototype.max = function() {
			  return Math.max.apply(null, this);
			};

			Array.prototype.min = function() {
			  return Math.min.apply(null, this);
			};

			Array.prototype.avg = function() {
			  var total = 0
			  for (var i = 0;i != this.length;++i) {
			  	total = total + this[i]
			  }
			  return total / this.length
			};	
			
			$('#total_WIFI').html(data_wifi.avg() * data_wifi.length)
			$('#total_3G').html(data_3g.avg() * data_3g.length)
			$.jqplot('traffic-time',[data_wifi,data_3g],{
				title: "Total Comsumed Data",
				series : [
					{label:"WIFI"},
					{label:"3G"}
				],
				series : [
						{label:"WIFI"},
						{label:"3G"}
					],
					legend: {
			            show: true,
			            placement: 'outsideGrid'
			        },
	            axes: {
	                xaxis: {
	                	label: "Time(10 seconds)",
	                    renderer: $.jqplot.CategoryAxisRenderer
	                } ,
	                yaxis: {
	                	label: "Data(KB)",
	                }
	            }
	        })
	        $.jqplot('traffic-static',
		        		[[data_wifi.min(),data_wifi.avg(),data_wifi.max()],
		        		[data_3g.min(),data_3g.avg(),data_3g.max()]], {
		        	title: "Traffic Statistics of Each 10 Seconds",
					seriesDefaults:{
			            renderer:$.jqplot.BarRenderer,
			            rendererOptions: {fillToZero: true},
			            pointLabels: { show: true }
			        },
			        series : [
						{label:"WIFI"},
						{label:"3G"}
					],
					legend: {
			            show: true,
			            placement: 'outsideGrid'
			        },
		            axes: {
		                xaxis: {
		                	label: "Statistics Index",
		                    renderer: $.jqplot.CategoryAxisRenderer,
		                    ticks:["Min","Avg","Max"]

		                } ,
		                yaxis: {
		                	label: "Data(KB)",
		                }
		            }
		            }	        	
	        	)
		})
	</script>
	<span class="hidden" id="data_3G">
		{{.data_3G | Marshal}}
	</span>
	<span class="hidden" id="data_WIFI">
		{{.data_wifi | Marshal}}
	</span>
	<div class="row">
		<div class="row">
			<div class="large-12 columns header">
				<h1>Analysis Result For {{.app_name}}</h1>
				<hr>
			</div>
		</div>
		<div class="row">
			<p>
				<b>Case Create Time:</b> {{.start_time}}
			</p>
			<p>
				<b>Finished Analyze Time:</b>{{.finish_time}}
			</p>
			<p>
				We captured the traffic in the simulator with 3G network interface. Total data transfered is <span id="total_3G"></span> KB. 
			</p>
			<p>
				In wifi, total data tranfered is <span id="total_WIFI"></span> KB
			</p>
			<div id="traffic-time" style="height:300px;width:800px">
			</div>
			<p>The data static analysis result is </p>
			<div id="traffic-static" style="height:300px;width:800px">
			</div>			
		</div>
		
	</div>
	
</body>
</html>
